<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<style type="text/css">
			body{
				padding-top: 50px;
			}
		</style>
	</head>
	<script>
		onload = function(){
			var divs = document.getElementsByTagName("div");
			
			//addEventListener(eventname, function, isCapture)
			
			document.body.addEventListener("click", function(){
				console.log("body ---- 捕获"); //1
			},true);
			divs[1].addEventListener("click", function(){
				console.log("small ---- 捕获");  //2
			}, true);
			divs[1].addEventListener("click", function(){
				console.log("small ---- 冒泡");  //3
			}, false);
			divs[0].addEventListener("click", function(){
				console.log("big ---- 冒泡a");  //4
			}, false);
			divs[0].addEventListener("click", function(){
				console.log("big ---- 冒泡b");   //5
			}, false);
			document.body.addEventListener("click", function(){
				console.log("body ---- 冒泡");  //6
			},false);
		}
	</script>
	<body>
		<div txt="BIG" style="margin:auto;width:500px; height:500px; background:#aaa333; position:relative">
			<div txt="SMALL" style="position:absolute; left: 100px; top: 50px;width:200px; height:200px; background:#f40">
				
			</div>
		</div>
	</body>
</html>
